<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>music</title>
    <style>@import "css/music.css";</style>
</head>
<body>
<div id="music">
    <div class="musicSearch">
        <input type="text" class="search">
        <input type="button" value="搜索" class="searchBut">

    </div>
    <div class="musicList innerbox">
        <ul>
            <li v-for="item in musicList">
                <div @click="playMusic(item)" class="play"></div>
                <div>{{item.musicName}}</div>
            </li>
        </ul>
    </div>
    <div class="musicPlayer">
        <div class="musicPlayerImg" :style="{background:musicImg,backgroundSize:'100%',
            animationPlayState:musicPlayState?'running':'paused'}">
        </div>

    </div>
    <div class="musicComment">
        <ul>
            <li v-for="item in newArray">
                {{item.musicName}}
            </li>
        </ul>
    </div>
    <div class="doPlayer">
        <audio ref="myAudio" :src="musicPath" id="myAudio" autoplay controls
               @play="musicPlayState=true" @pause="musicPlayState=false">

        </audio>

    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.main.js"></script>
<script>
    var basepath="http://www.softeem.xin:8888/public/musicData/";
    var myMusic = new Vue({
        el:"#music",
        data:{
            musicList:[],
            musicPath:"",
            musicImg:'url(./img/one.jpg)',
            currentIndex:0,
            musicPlayState:false,
            newArray:[]
        },
        methods:{
            playMusic:function (item) {
               if(!this.musicPlayState){
                   this.musicPath = basepath + item.musicPath;
                   var musicLrcUrl = basepath + item.lrcPath;
                   this.getLrc(musicLrcUrl);
                   this.$refs.audio.play();
               }else {
                   this.$refs.audio.pause();
               }
               this.musicPlayState = !this.musicPlayState

            },
            getLrc:function(lrcUrl){
                axios.get(lrcUrl).then((result)=>{
                    var lrcData = result.data;
                    var lrcArray = lrcData.split("\n");
                    for(var i=0; i< lrcArray.length; i++){
                        var time = lrcArray[i].substring(1,10);
                        var word = lrcArray[i].substring(11,lrcArray[i].length);
                        this.newArray.push({'time':time,'word':word});
                    }

                }).catch()

            },

            getMusicList:function () {
                axios.get(basepath+"musicData.json")
                    .then((result)=>{
                        if(result!=null)
                            this.musicList=result.data;
                    })
                    .catch()

            },


        },
        created(){
            this.getMusicList();
        }

    })
</script>
</body>
</html>